import React, { useMemo } from 'react'
import { useModel } from 'umi'

export default function Goods() {

  const {list,changeCheck,changnum,del,total}=useModel("cat")
  // const [list,setList]=React.useState([
  //   {name:"橘子",price:5,checked:false,num:1,id:0},
  //   {name:"西瓜",price:7,checked:false,num:1,id:1},
  //   {name:"苹果",price:10,checked:false,num:1,id:2},
  //   {name:"枇杷",price:15,checked:false,num:1,id:3},
  // ])

  // function changeCheck(id:number){
  //   for (const item of list) {
  //       if(item.id==id){
  //           item.checked=!item.checked
  //           break

  //       }
        
  //   }
  //   setList([...list])
  // }
  // function changnum(id:number,n:-1|1){
  //   for (const item of list) {
  //     if(item.id==id){
  //         item.num+=n
  //         break

  //     }
  // }
  // setList([...list])
  // }

  // function del(id:number){

  //  const newList= list.filter(item=>item.id !=id)

  //  setList(newList)
  // }

  //   const total=React.useMemo(()=>{
  //   let t=0
  //   list.filter(item=>item.checked).forEach(item=>{
  //      t+=item.price*item.num
  //   })
  //   return t
  // },[list])


  return (
    <div>
        <table>
          <thead>
            <tr>
              <td><input type="checkbox" /></td>
              <td>名字</td>
              <td>价格</td>
              <td>数量</td>
              <td>小计</td>
              <td>操作</td>
            </tr>
          </thead>
          <tbody>
              {list.map(item=>{

                return  <tr key={item.id}>
                <td><input onChange={()=>changeCheck(item.id)} checked={item.checked} type="checkbox" /></td>
                <td>{item.name}</td>
                <td>{item.price}</td>
                <td><button disabled={item.num==1} onClick={()=>changnum(item.id,-1)}>-</button>{item.num}<button onClick={()=>changnum(item.id,1)}>+</button></td>
                <td>{item.price*item.num}</td>
                <td><button onClick={()=>del(item.id)}>删除</button></td>
          
                </tr>   

              })}


             


          </tbody>


        </table>
            
          总计：{total}



    </div>
  )
}
